<template>
	<view class="body">
		<uni-section title="门禁" padding="20rpx 40rpx;">
			<view class="row-input">
				<text class="star">*</text>
				<text class="label">房间号:</text>
				<input type="text" class="editor no-border" v-model="room_num" disabled />
			</view>
			<view class="row-input mt-10">
				<text class="star">*</text>
				<text class="label">门禁编号:</text>
				<input type="text" class="editor no-border" placeholder="未添加" v-model="gate_num" disabled />
			</view>
		</uni-section>

		<uni-section class="mt-10" :title=" '认证员工 ('+users.length +'人)'  " padding="0rpx 20rpx;">
			<template v-slot:right>
				<button type="primary" class="btn-small" @click="reAuth">人员管理</button>
			</template>

			<view v-if="users==null || users.length==0" class="no-user">
				请在门禁认证中添加员工
			</view>

			<uni-grid v-if="users!=null&&users.length>0" :column="3" :square="false" :showBorder="false"
				:highlight="false">

				<!-- <uni-grid-item v-for="(item) in users" :key="item.id">
					<mem-item :showIcon="false" :content="item.realName"></mem-item>
				</uni-grid-item> -->
			</uni-grid>
			<!-- <view style="height: 30rpx;">

			</view> -->
		</uni-section>


		<button type="default" class="btn" @click="toEdit">修改</button>
	</view>
</template>

<script>
	import cfg from '@/utils/config.js'
	import MemItem from '@/components/mem_item/mem_item.vue';
	export default {
		components: {
			MemItem
		},
		data() {
			return {
				id: null,

				room_num: '',
				gate_num: '',

				users: [],
			}
		},
		onLoad(param) {
			this.id = param.id
		},
		onShow() {
			this.queryInfo()
		},
		methods: {
			queryInfo() {
				uni.request({
					url: cfg.host + 'room/get/' + this.id,
					success: (res) => {
						if (res.data.code == 0) {
							let data = res.data.data
							if (data != null) {
								this.room_num = data.name
								let userList = data.userList || []
								// if (userList.length > 8) {
								// 	this.users = userList.splice(0, 8)
								// } else {
									this.users = userList
								// }
								if (data.device) {
									this.gate_num = data.device.serialNumber
								}
							}
						}
					}
				})
			},

			reAuth() {
				uni.navigateTo({
					url: '/pages2/gate/auth?id=' + this.id + '&name=' + this.room_num
				})
			},
			toEdit() {
				uni.navigateTo({
					url: '/pages2/gate/edit?id=' + this.id
				})
			}
		}
	}
</script>

<style lang="scss">
	.member-wrap {
		display: flex;
		flex-direction: column;
	}

	.re-text {
		margin-top: 20rpx;
		margin-left: 20rpx;
		font-size: 26rpx;
		color: #666;
	}

	.btn-small {
		height: 60rpx;
		line-height: 60rpx;
		font-size: 26rpx;
	}

	.no-user {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 120rpx;
		color: #999;
	}
</style>